<template>
	<view class="container">
		<!-- 顶部导航栏 -->
		<view class="nav-bar">
			<view class="left">
				<u-icon name="arrow-left" size="32" color="#333" @click="goBack"></u-icon>
			</view>
			<view class="title">脑卒中风险评估</view>
		</view>
		
		<!-- 内容区域 -->
		<scroll-view class="content-scroll" scroll-y>
			<view class="content">
				<!-- 说明卡片 -->
				<view class="info-card">
					<view class="info-title">评估说明</view>
					<view class="info-desc">本评估用于评估您发生脑卒中的风险水平，根据您的回答提供风险评估结果，仅供参考。请认真回答以下问题。</view>
				</view>
				
				<view class="question-list">
					<view class="question-item" v-for="(item, index) in questions" :key="index">
						<view class="question-title">{{index + 1}}. {{item.title}}</view>
						<view class="options">
							<view class="option" v-for="(option, optIndex) in item.options" :key="optIndex"
								:class="{'selected': item.selected === optIndex}"
								@click="selectOption(index, optIndex)">
								<text class="option-text">{{option.text}}</text>
							</view>
						</view>
					</view>
				</view>
				
				<view class="submit-btn" :class="{'disabled': !canSubmit}" @click="submit">
					<text>提交</text>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				questions: [
					{
						title: '您的年龄',
						selected: -1,
						options: [
							{ text: '40岁以下', value: 0 },
							{ text: '40-49岁', value: 1 },
							{ text: '50-59岁', value: 2 },
							{ text: '60-69岁', value: 3 },
							{ text: '70岁以上', value: 4 }
						]
					},
					{
						title: '血压情况',
						selected: -1,
						options: [
							{ text: '正常（120/80以下）', value: 0 },
							{ text: '轻度升高（120-139/80-89）', value: 1 },
							{ text: '中度升高（140-159/90-99）', value: 2 },
							{ text: '重度升高（160/100以上）', value: 3 }
						]
					},
					{
						title: '是否有糖尿病',
						selected: -1,
						options: [
							{ text: '无', value: 0 },
							{ text: '糖尿病前期', value: 1 },
							{ text: '是，但控制良好', value: 2 },
							{ text: '是，且控制不佳', value: 3 }
						]
					},
					{
						title: '吸烟情况',
						selected: -1,
						options: [
							{ text: '从不吸烟', value: 0 },
							{ text: '已戒烟超过5年', value: 1 },
							{ text: '已戒烟不足5年', value: 2 },
							{ text: '当前吸烟', value: 3 }
						]
					},
					{
						title: '心房颤动情况',
						selected: -1,
						options: [
							{ text: '无', value: 0 },
							{ text: '有，但治疗良好', value: 2 },
							{ text: '有，治疗不佳', value: 4 }
						]
					},
					{
						title: '身体活动水平',
						selected: -1,
						options: [
							{ text: '经常锻炼（每周超过150分钟）', value: 0 },
							{ text: '有规律锻炼（每周约90-150分钟）', value: 1 },
							{ text: '偶尔锻炼（每周少于90分钟）', value: 2 },
							{ text: '几乎不锻炼', value: 3 }
						]
					},
					{
						title: '家族史',
						selected: -1,
						options: [
							{ text: '无脑卒中家族史', value: 0 },
							{ text: '远亲有脑卒中病史', value: 1 },
							{ text: '一级亲属有脑卒中病史', value: 3 }
						]
					}
				]
			}
		},
		computed: {
			canSubmit() {
				return this.questions.every(item => item.selected !== -1)
			}
		},
		methods: {
			goBack() {
				uni.navigateBack()
			},
			selectOption(questionIndex, optionIndex) {
				this.questions[questionIndex].selected = optionIndex
			},
			submit() {
				if (!this.canSubmit) {
					uni.showToast({
						title: '请完成所有问题',
						icon: 'none'
					});
					return;
				}
				
				// 计算总分
				const totalScore = this.questions.reduce((sum, item) => {
					const selectedValue = item.options[item.selected].value
					return sum + selectedValue
				}, 0)
				
				// 转换为百分制分数，最高分值为23分
				const scorePercent = Math.min(Math.round(totalScore / 23 * 100), 100)
				
				// 提交评估结果
				uni.showLoading({
					title: '提交中...'
				})
				
				setTimeout(() => {
					uni.hideLoading()
					uni.showToast({
						title: '提交成功',
						icon: 'success'
					})
					
					// 保存到本地存储
					this.saveReport(scorePercent)
					
					// 更新已完成评估状态
					this.updateCompletedStatus()
					
					// 跳转到评估报告页面
					setTimeout(() => {
						uni.navigateTo({
							url: `/pages/assessment/report?type=stroke&score=${scorePercent}`
						})
					}, 1500)
				}, 1000)
			},
			
			// 保存评估记录到本地存储
			saveReport(score) {
				try {
					// 获取现有报告
					let riskReports = uni.getStorageSync('risk_reports') || []
					
					// 添加新报告
					const newReport = {
						id: 'stroke' + Date.now(),
						type: 'stroke',
						date: this.formatDate(new Date()),
						score: score
					}
					
					// 将新报告添加到列表前面
					riskReports.unshift(newReport)
					
					// 保存回本地存储
					uni.setStorageSync('risk_reports', riskReports)
					
					// 更新风险报告计数
					const reportCounts = uni.getStorageSync('report_counts') || { risk: 0, health: 0 }
					reportCounts.risk += 1
					uni.setStorageSync('report_counts', reportCounts)
					
					console.log('风险评估报告已保存')
				} catch (e) {
					console.error('保存评估报告失败', e)
				}
			},
			
			// 更新已完成评估状态
			updateCompletedStatus() {
				try {
					const completedAssessments = uni.getStorageSync('completed_assessments') || {
						stroke: false,
						recurrence: false,
						efficacy: false,
						decision: false,
						health: false
					}
					
					completedAssessments.stroke = true
					uni.setStorageSync('completed_assessments', completedAssessments)
				} catch (e) {
					console.error('更新评估状态失败', e)
				}
			},
			
			// 格式化日期为 YYYY-MM-DD HH:MM 格式
			formatDate(date) {
				const year = date.getFullYear()
				const month = String(date.getMonth() + 1).padStart(2, '0')
				const day = String(date.getDate()).padStart(2, '0')
				const hours = String(date.getHours()).padStart(2, '0')
				const minutes = String(date.getMinutes()).padStart(2, '0')
				
				return `${year}-${month}-${day} ${hours}:${minutes}`
			}
		}
	}
</script>

<style lang="scss">
	.container {
		background-color: #f5f5f5;
		min-height: 100vh;
		display: flex;
		flex-direction: column;
		
		.nav-bar {
			background-color: #fff;
			padding: 20rpx 30rpx;
			display: flex;
			align-items: center;
			box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
			
			.title {
				flex: 1;
				text-align: center;
				font-size: 36rpx;
				font-weight: bold;
				color: #333;
				margin-right: 32rpx;
			}
			
			.left {
				width: 60rpx;
			}
		}
		
		.content-scroll {
			flex: 1;
			height: calc(100vh - 100rpx);
		}
		
		.content {
			padding: 20rpx 30rpx;
			
			.info-card {
				background-color: #fff;
				border-radius: 12rpx;
				padding: 30rpx;
				margin-bottom: 20rpx;
				box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.05);
				border-left: 6rpx solid #ff6b6b;
				
				.info-title {
					font-size: 32rpx;
					font-weight: bold;
					color: #333;
					margin-bottom: 16rpx;
				}
				
				.info-desc {
					font-size: 28rpx;
					color: #666;
					line-height: 1.5;
				}
			}
			
			.question-list {
				.question-item {
					background-color: #fff;
					border-radius: 12rpx;
					padding: 30rpx;
					margin-bottom: 20rpx;
					box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.05);
					
					.question-title {
						font-size: 30rpx;
						color: #333;
						margin-bottom: 30rpx;
						line-height: 1.5;
						font-weight: bold;
					}
					
					.options {
						display: flex;
						flex-direction: column;
						gap: 20rpx;
						
						.option {
							display: flex;
							align-items: center;
							padding: 20rpx;
							border-radius: 8rpx;
							background-color: #F7F7FA;
							
							.option-text {
								font-size: 28rpx;
								color: #666;
							}
							
							&.selected {
								background-color: #FFEFEF;
								border: 1rpx solid #FF6B6B;
								
								.option-text {
									color: #FF6B6B;
								}
							}
						}
					}
				}
			}
			
			.submit-btn {
				background-color: #FF6B6B;
				height: 90rpx;
				border-radius: 45rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				margin: 40rpx 0;
				box-shadow: 0 2rpx 12rpx rgba(255, 107, 107, 0.3);
				
				text {
					color: #fff;
					font-size: 32rpx;
					font-weight: bold;
				}
				
				&.disabled {
					background-color: #ccc;
					opacity: 0.6;
					box-shadow: none;
				}
			}
		}
	}
</style> 